<template>
  <div>
    <el-form
      :model="addForm"
      ref="addFormRef"
      label-position="top"
      label-suffix=":"
      :rules="rules"
    >
      <el-form-item label="受检人姓名" prop="customerName">
        <el-input
          v-model="addForm.customerName"
          placeholder="请输入受检人姓名"
        />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="addForm.sex">
          <el-radio-button label="男" :value="1" />
          <el-radio-button label="女" :value="2" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="联系方式" prop="customerTel">
        <el-input v-model="addForm.customerTel" placeholder="请输入联系方式" />
      </el-form-item>
      <el-form-item label="出生日期" prop="birthday">
        <el-date-picker
          v-model="addForm.birthday"
          type="date"
          placeholder="请选择日期"
          class="w-full"
          format="YYYY-MM-DD"
          value-format="x"
          :disabled-date="(time) => time.getTime() > Date.now()"
        />
      </el-form-item>

      <el-form-item label="工作环境" prop="workEnvName">
        <el-select
          v-model="addForm.workEnvName"
          placeholder="请选择工作环境"
          filterable
        >
          <el-option
            v-for="item in props.workEnvList"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="职业" prop="occupationName">
        <el-select
          v-model="addForm.occupationName"
          placeholder="请选择职业"
          filterable
        >
          <el-option
            v-for="item in props.occupationList"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="用眼距离" prop="eyeUsageDistanceName">
        <el-select
          v-model="addForm.eyeUsageDistanceName"
          placeholder="请选择用眼距离"
          filterable
        >
          <el-option
            v-for="item in props.eyeDistanceList"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="受检人地址" prop="address">
        <el-input v-model="addForm.address" placeholder="请输入受检人地址" />
      </el-form-item>
      <el-form-item label="受检人来源" prop="customerSource">
        <el-select
          v-model="addForm.customerSource"
          placeholder="请选择受检人来源"
        >
          <el-option label="自来客人" value="自来客人" />
          <el-option label="朋友介绍" value="朋友介绍" />
          <el-option label="抖音" value="抖音" />
          <el-option label="快手" value="快手" />
          <el-option label="微信朋友圈" value="微信朋友圈" />
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="addForm.remark"
          placeholder="请输入备注"
          type="textarea"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { handleApiResponse } from "@/utils/request.js";
import {
  GetCustomerInfoById,
  CreateCustomerByPc,
  UpdateCustomerById,
} from "../../../../../wailsjs/go/api/CustomerApi.js";
onMounted(() => {
  if (props.detailId != 0) getCustomerInfo();
});

const emit = defineEmits(["handleSuccessBack", "handleBack"]);
const props = defineProps({
  detailId: { type: Number, default: 0 },
  workEnvList: {
    type: Array,
    default: () => [],
  },
  occupationList: {
    type: Array,
    default: () => [],
  },
  eyeDistanceList: {
    type: Array,
    default: () => [],
  },
});

const addFormRef = ref(null);
const addForm = ref({
  customerName: "",
  customerTel: "",
  sex: null,
  birthday: null,
  headUrl: "",
  address: "",
  //   customerSource: "", // 受检人来源
  //   accountSource:'', // 开户来源
  remark: "",
  occupationName: "",
  workEnvName: "",
  eyeUsageDistanceName: "",
});

const handleSubmitCustomer = () => {
  addFormRef.value.validate(async (valid) => {
    if (!valid) return;
    if (props.detailId == 0) createCustomer();
    else updateCustomer();
  });
};
const handleCancel = () => {
  addFormRef.value.resetFields();
};

async function getCustomerInfo() {
  handleApiResponse(() => GetCustomerInfoById(props.detailId)).then((res) => {
    if (res.code == 0) {
      addForm.value = res.data.customer || {};
    }
  });
}

async function createCustomer() {
  handleApiResponse(() => CreateCustomerByPc(addForm.value)).then((res) => {
    if (res.code == 0) {
      ElMessage.success("添加成功");
      emit("handleSuccessBack", res.data.customer || {});
    }
    emit("handleBack");
  });
}

async function updateCustomer() {
  // return console.log(addForm.value);
  handleApiResponse(() => UpdateCustomerById(addForm.value)).then((res) => {
    if (res.code == 0) {
      ElMessage.success("修改成功");
      emit("handleSuccessBack", res.data.customer || {});
    }
    emit("handleBack");
  });
}

const rules = ref({
  customerName: [{ required: true, message: "请输入受检人姓名" }],
  customerTel: [
    { required: true, message: "请输入联系方式" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
    { min: 11, max: 11, message: "长度为11位" },
  ],
  occupationName: [
    { required: false, message: "请选择职业", trigger: "change" },
  ],
  workEnvName: [
    { required: false, message: "请选择工作环境", trigger: "change" },
  ],
  eyeUsageDistanceName: [
    { required: false, message: "请选择眼距", trigger: "change" },
  ],
  birthday: [{ required: true, message: "请选择出生日期", trigger: "change" }],
  sex: [{ required: true, message: "请选择性别", trigger: "change" }],
});

defineExpose({
  handleSubmitCustomer,
  handleCancel,
});
</script>

<style scoped lang="scss">
</style>